<template>
  <div class="Cardetail">
    <el-row>
      <div id="head">
        <el-col :xs="24" :sm="14" :md="12" :lg="12" :xl="12">
          <div id="spic">
            <div class="spicBig">
              <img :src="getbigimg(url)" />
            </div>
            <div class="spicSmall">
              <img :src="getimg1(cardetail.carPic1)" @click="getbigimg(getimg1(cardetail.carPic1))" />
              <img :src="getimg1(cardetail.carPic3)" @click="getbigimg(getimg1(cardetail.carPic3))" />
              <img :src="getimg1(cardetail.carPic5)" @click="getbigimg(getimg1(cardetail.carPic5))" />
              <img :src="getimg1(cardetail.carPic7)" @click="getbigimg(getimg1(cardetail.carPic7))" />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="10" :md="12" :lg="12" :xl="12">
          <div id="sdetail">
            <h3>{{cardetail.carName}}</h3>
            <p>￥{{cardetail.price}}/日均</p>
            <div class="sbasic">
              <div>汽车基本信息</div>
            </div>
            <div class="ssbasic">
              <dl class="dl-horizontal">
                <dt>品 牌 :</dt>
                <dd>&nbsp;{{cardetail.brand}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>车 系 :</dt>
                <dd>&nbsp;{{ cardetail.carSeries}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>年代款 :</dt>
                <dd>&nbsp;{{cardetail.productDate}}</dd>
              </dl>
            </div>
            <div class="sconfigure">
              <div>汽车配置信息</div>
            </div>
            <div class="fsconfigure">
              <dl class="dl-horizontal">
                <dt>车 型 :</dt>
                <dd>&nbsp;{{cardetail.carType}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>导 航 :</dt>
                <dd>&nbsp;{{cardetail.carGPS}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>排 量 :</dt>
                <dd>&nbsp;{{cardetail.displacement}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>座 椅 :</dt>
                <dd>&nbsp;{{cardetail.carSeatNum}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>天 窗:</dt>
                <dd>&nbsp;{{cardetail.carWin}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>音 响:</dt>
                <dd>&nbsp;{{cardetail.carSound}}</dd>
              </dl>
            </div>
            <div class="ssconfigure">
              <dl class="dl-horizontal">
                <dt>配置款 :</dt>
                <dd>&nbsp;{{cardetail.carConfig}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>座位数 :</dt>
                <dd>&nbsp;{{cardetail.carSeatNum}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>气囊数 :</dt>
                <dd>&nbsp;{{cardetail.carGasbag}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>燃油类型 :</dt>
                <dd>&nbsp;{{cardetail.carOilType}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>燃油编号 :</dt>
                <dd>&nbsp;{{cardetail.carOilNum}}</dd>
              </dl>

              <dl class="dl-horizontal">
                <dt>倒车雷达 :</dt>
                <dd>&nbsp;{{cardetail.carPDC}}</dd>
              </dl>
            </div>
            <div class="sbtn">
              <router-link to="/index/order">
                <button class="sbtna" @click="toOrder()">立即预定</button>
              </router-link>
              <!-- <input type="button" class="sbtnb" @click="collect()" ref="add" :value="collecttxt" /> -->
              <button class="sbtnb" @click="collect($event)">{{collecttxt}}</button>
              <div class="carcoll">
                <i class="el-icon-star-off"></i>
                <span>收藏数：{{collectNum}}</span>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </el-row>
    <el-row>
      <div id="sbody">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="用户评价" name="first">
            <div v-for="(v,k) in usercum.slice((currentPage-1)*6,(currentPage)*6)" :key="k">
              <div class="usercum">
                <p class="usercuma">{{v.userName }}</p>
                - {{v.evaluateDate | dateFormat}}
                <p class="usercumb">{{v.content }}</p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="showcum">
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :total="allpages"
            :page-count="11"
            @current-change="handleCurrentChange"
            :page-size="pagesize"
          ></el-pagination>
        </div>
      </div>
    </el-row>
    <el-row>
      <div id="sfoot">
        <div class="sfoot_title">
          <h3>热门车型推荐</h3>
          <h5>了解到我们更多的汽车产品</h5>
        </div>
        <transition enter-active-class="animated fadeInUp">
          <el-row class="row-bg" v-if="show==true">
            <el-col :xs="12" :sm="12" :md="6" v-for="(v,k) in topcars" :key="k">
              <div class="grid-content bg-purple">
                <img :src="getimg1(v.carPic1)" />
                <div>{{v.carName}}</div>
                <div class="uppic">
                  <div class="uppic_bordera"></div>
                  <div class="uppic_borderb"></div>
                  <div class="uppic_borderc"></div>
                  <div class="uppic_price">￥{{v.price}}</div>
                  <div class="uppic_view" @click="gotopdetail(v.carId)">查看详情</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </transition>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cardetail: [],
      carId: this.$route.query.carId,
      activeName: "first",
      collecttxt: "",
      collectNum: "",
      usercum: [],
      currentPage: 1,
      pagesize: 6,
      allpages: null,
      showcum: "",
      show: "",
      top: 850,
      topcars: [],
      msg: "",
      url: ""
    };
  },
  created() {
    //显示汽车的详细信息
    this.$axios
      .put("http://localhost:3000/carlist/ShowCarDetails", {
        carId: this.$route.query.carId
      })
      .then(res => {
        this.cardetail = res.data.data[0];
        this.collectNum = this.cardetail.carcollect;
        this.url = "http://localhost:3000/upload/" + this.cardetail.carPic1;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
    this.$axios
      .put("http://localhost:3000/carlist/ShowCarDetails", {
        carId: this.$route.query.carId
      })
      .then(res => {
        this.cardetail = res.data.data[0];
        this.url = "http://localhost:3000/upload/" + this.cardetail.carPic1;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });

    //显示汽车是否被当前用户收藏过
    this.$axios
      .post("http://localhost:3000/cardetail/ShowFavourite", {
        carId: this.$route.query.carId
      })
      .then(res => {
        if (res.data.data == 0) {
          this.collecttxt = "添加收藏";
        } else {
          this.collecttxt = "已收藏";
        }
      })
      .catch(err => {
        console.log("错误信息：", err);
      });

    //显示汽车的用户评价内容
    this.$axios
      .post(
        "http://localhost:3000/cardetail/ShowCarAllcomment/" +
          this.$route.query.carId
      )
      .then(res => {
        if (res.data.data) {
          this.showcum = true;
          this.usercum = res.data.data;
          this.allpages = res.data.data.length;
        } else {
          this.showcum = false;
        }
      })
      .catch(err => {
        console.log("错误信息：", err);
      });

    //显示收藏前四
    this.$axios
      .post("http://localhost:3000/cardetail/populerPic")
      .then(res => {
        this.topcars = res.data.data;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  inject: ["reload"],
  methods: {
    //汽车图片
    getimg1(pic) {
      let path = "http://localhost:3000/upload/" + pic;
      return path;
    },
    getbigimg(url) {
      this.url = url;
      return this.url;
    },

    //更改收藏按钮
    collect(e) {
      this.$axios
        .post("http://localhost:3000/cardetail/Favourite", {
          carId: this.$route.query.carId
        })
        .then(res => {
          this.msg = res.data.data;
          if (this.msg == 1) {
            alert("添加收藏成功！");
            this.collecttxt = "已收藏";
            this.collectNum = this.collectNum + 1;
          }
          if (this.msg == 2) {
            alert("取消收藏成功！");
            this.collecttxt = "添加收藏";
            this.collectNum = this.collectNum - 1;
          }
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    },
    //跳转订单
    toOrder: function() {
      this.$router.push({
        name: "order",
        query: { carId: this.carId }
      });
    },

    //评论分页
    handleClick(tab, event) {},
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleScroll() {
      var top = document.documentElement.scrollTop;
      if (top > this.top) {
        this.show = true;
      }
    },

    //点击跳转收藏数最高四辆车详情
    gotopdetail(carId) {
      this.carId = carId;
      this.$router.push({
        name: "cardetail",
        query: { carId: this.carId }
      });
      this.$axios
        .put("http://localhost:3000/carlist/ShowCarDetails", {
          carId: this.$route.query.carId
        })
        .then(res => {
          this.cardetail = res.data.data[0];
          this.url = "http://localhost:3000/upload/" + this.cardetail.carPic1;
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    }
  },
  watch: {
    $route(to, from) {
      this.gotopdetail(this.$route.query.carId);
    }
  }
};
</script>
<style>
#head {
  width: 80%;
  margin: 0 auto;
}
#spic {
  margin-top: 20px;
}
.spicBig {
  width: 100%;
  height: 440px;
  overflow: hidden;
}
.spicBig img {
  display: block;
  margin: 0 auto;
  width: 430px;
  height: 430px;
  text-align: center;
  overflow: hidden;
}
.spicSmall {
  width: 100%;
  height: 90px;
  /* margin: 0 auto; */
  /* background: #0f1f; */
  display: flex;
  justify-content: space-between;
}
.spicSmall img {
  width: 100px;
  height: 90px;
}
#sdetail {
  width: 100%;
  margin-left: 60px;
  margin-top: 20px;
  /* background-color: #3af; */
}
#sdetail h3 {
  margin-left: 50px;
  font-size: 22px;
  font-family: "微软雅黑";
  font-weight: 600;
}
#sdetail p {
  margin-left: 50px;
  font-size: 18px;
  font-family: Helvetica；;
}
#sdetail .sbasic {
  width: 80%;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  color: rgb(10, 10, 10);
  background-image: url("../../../routproj/public/upload/tittle1.png");
  background-repeat: no-repeat;
  border-bottom: 1px solid rgb(252, 227, 2);
}
.sbasic div {
  position: relative;
  left: 50px;
}
.ssbasic {
  margin-left: 50px;
}
.dl-horizontal {
  clear: left;
}
dt,
dd {
  float: left;
  line-height: 30px;
  /* margin-top: 15px; */
}
dt {
  font-family: "华文细黑";
  font-size: 18px;
  color: rgb(63, 62, 62) !important;
}
dd {
  font-family: "Georgia";
  font-size: 16px;
  color: rgb(100, 100, 100);
}
#sdetail .sconfigure {
  margin-top: 30px;
  clear: left;
  width: 80%;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  color: rgb(10, 10, 10);
  background-image: url("../../../routproj/public/upload/tittle1.png");
  background-repeat: no-repeat;
  border-bottom: 1px solid rgb(252, 227, 2);
}
.sconfigure div {
  position: relative;
  left: 50px;
}
.fsconfigure,
.ssconfigure {
  margin-top: 15px;
  float: left;
}
.fsconfigure {
  margin-left: 50px;
}
.ssconfigure {
  margin-left: 130px;
}
.sbtn {
  padding-top: 17px;
  clear: left;
  /* padding-left: 50px; */
}
.sbtna,
.sbtnb {
  background: white;
  width: 120px;
  height: 40px;
  border: 2px solid rgb(82, 81, 81);
  outline: none !important;
  border-radius: 5px;
  transition: all 400ms ease-in-out 0s;
}
.sbtna:hover,
.sbtnb:hover {
  background: rgb(41, 41, 41);
  color: aliceblue;
  transition: all 400ms ease-in-out 0s;
}
.sbtna {
  margin-left: 50px;
}
.sbtnb {
  margin-left: 100px;
}
.carcoll {
  margin-left: 327px;
}
#sbody {
  width: 80%;
  /* height: 450px; */
  margin: 0 auto;
  margin-top: 30px;
  position: relative;
  /* background-color: #00f; */
  transition: all 300ms ease-in-out 0s;
}
.el-tabs__item.is-active {
  font-size: 18px;
  font-family: "华文细黑";
  color: black !important;
}
.usercum {
  width: 97%;
  /* background-color: #f0f; */
  box-shadow: 0 0 6px #aaa;
  background-color: rgb(238, 237, 237);
  border-radius: 3px;
  margin-top: 15px;
  position: relative;
  left: 20px;
  margin-bottom: 5px;
}
.usercuma {
  font-size: 18px;
  float: left;
  margin: 0;
}
.usercumb {
  color: rgb(94, 92, 92);
  clear: left;
  margin: 0;
}
.block {
  position: relative;
  top: 10px;
  text-align: center;
  margin-top: 5px;
  margin: 0 auto;
  border: none;
}
#sfoot {
  height: 380px;
  margin-top: 200px;
}
.sfoot_title {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 40px;
}
.sfoot_title h3,
h5 {
  text-align: center;
}
.grid-content {
  border-radius: 4px;
  margin: 0 auto;
  width: 200px;
  height: 190px;
}
.row-bg {
  width: 80%;
  margin: 0 auto;
}
.grid-content .bg-purple {
  display: flex;
  justify-content: space-between;
}
.grid-content,
.bg-purple img {
  position: relative;
  z-index: 0;
  width: 200px;
  height: 190px;
  transform: scale(1);
  transition: all 600ms ease-in-out 0s;
}
.uppic {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 200px;
  height: 190px;
  background-color: rgba(243, 241, 241, 0.4);
  opacity: 0;
  transform: scale(0.05);
  transition: all 600ms ease-in-out 0s;
}
.uppic_bordera {
  position: absolute;
  width: 60%;
  height: 30%;
  left: 20%;
  top: 19%;
  border: 1px solid rgb(252, 227, 2);
  border-radius: 10px;
}
.uppic_borderb {
  position: absolute;
  width: 20%;
  height: 10%;
  top: 34%;
  border-top: 1px solid rgb(252, 227, 2);
}
.uppic_borderc {
  position: absolute;
  width: 20%;
  height: 10%;
  right: 0;
  top: 34%;
  border-top: 1px solid rgb(252, 227, 2);
}
.bg-purple:hover img {
  box-shadow: 0 0 8px #eee;
  transform: scale(0.9);
  transition: all 500ms ease-in-out 0s;
}
.bg-purple:hover .uppic {
  opacity: 1;
  transform: scale(1.2);
  transition: all 300ms ease-in-out 0s;
}
.uppic_price {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 25px;
  float: left;
  margin-top: 50px;
}
.uppic_view {
  position: relative;
  top: 50px;
  text-align: center;
  font-size: 18px;
}
.uppic_view:hover {
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  #head,
  #sbody {
    width: 90%;
  }
  .spicBig img {
    display: block;
    margin: 0 auto;
    width: 395px;
    height: 430px;
    text-align: center;
    overflow: hidden;
  }
  #sdetail {
    margin-left: 0;
  }
  .usercum {
    width: 94%;
  }
  #sfoot {
    height: 600px;
  }
  .bg-purple:hover img {
    transform: none;
    transition: none;
  }
  .grid-content {
    border-radius: 4px;
    margin-bottom: 50px;
    width: 200px;
    height: 190px;
  }
  .row-bg {
    width: 100%;
    /* background-color: #f9fafc; */
  }
  .ssconfigure {
    margin-left: 60px;
  }
  .sbtnb {
    margin-left: 60px;
  }
  .carcoll {
    margin-left: 263px;
  }
}
@media screen and (min-width: 768px) {
  #head,
  #sbody {
    width: 90%;
  }
  .grid-content {
    border-radius: 4px;
    margin-bottom: 15px;
    width: 200px;
    height: 190px;
  }
  .row-bg {
    width: 87%;
    /* background-color: #f9fafc; */
  }
}
@media screen and (max-width: 991px) {
  #sfoot {
    height: 600px;
  }
  .bg-purple:hover img {
    transform: none;
    transition: none;
  }
  .bg-purple img {
    box-shadow: 0 0 6px #aaa;
  }
  .grid-content {
    margin-bottom: 50px;
  }
  .uppic {
    width: 0;
    height: 0;
  }
  .bg-purple:hover .uppic {
    opacity: 0;
  }
}
@media screen and (min-width: 1200px) {
  #head,
  #sbody {
    width: 80%;
  }
}
</style>
